<!-- 消息列表 -->
<template>
  <div class="mt-6 container-fluid">
    <div class="col-lg-4 col-sm-8">
      <div class="nav-wrapper position-relative end-0">
        <ul class="nav nav-pills nav-fill p-1" role="tablist">
          <li class="nav-item cursor-pointer">
            <span class="nav-link mb-0 px-0 py-1 active">Notifications</span>
          </li>
          <li class="nav-item cursor-pointer">
            <span class="nav-link mb-0 px-0 py-1">Recent Signals</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="row mx-0" style="margin-top: 36px">
      <div class="card">
        <div class="card-header pb-0">
          <div class="card-title">
            <h4 class="mb-0" style="font-size: 20px">Notification History</h4>
          </div>
        </div>
        <div class="card-body">
          <div class="d-flex">
            <div class="flex-shrink-0">
              <div
                class="p-2 avatar avatar-lg"
                style="background-color: #f8f9ff"
              >
                <i class="fa fa-bell text-2xl iconBgColor"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mt-0 text-sm">
                ENS has sent a new signal, go check it out now.
              </h6>
              <p class="text-sm">Today 11:01</p>
            </div>
          </div>
          <div class="mt-3 d-flex">
            <div class="flex-shrink-0">
              <div
                class="p-2 avatar avatar-lg"
                style="background-color: #f8f9ff"
              >
                <i class="fa fa-bell text-2xl iconBgColor"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mt-0 text-sm">
                Congratulations on successfully subscribing and becoming a
                member of Tradingsignal.ai.
              </h6>
              <p class="text-sm">Yesterday 11:01</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import setNavPills from "@/assets/js/nav-pills.js";

export default {
  mounted() {
    setNavPills();
  },
};
</script>

<style scoped lang="scss">
.iconBgColor {
  background: linear-gradient(135deg, #21d4fd 0%, #2152ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>
